<template>
    <div class="header-swiper">
        <swiper ref="mySwiper" :options="swiperOptions">
        <swiper-slide v-for='item in swiperList' :key='item.id'>
            <img :src="item.imgUrl">
        </swiper-slide>
        <div class="swiper-pagination" slot="pagination"></div>
        </swiper>
    </div>
</template>
<script>
    export default{
    props:['swiperList'],            
        data() {
            return {
                swiperOptions: {
                pagination: {
                    el: '.swiper-pagination'
                    },
                    loop:true
                }
            }
        },
    }
</script>
<style scoped>
.header-swiper{
    /* 处理掉块问题 */
    background-color: gray;
    height: 0;
    margin-bottom: 26.67%;
}
.header-swiper img{
    width: 100%;
    height: 100px;
}
</style>

